<template>
    <v-table>
        <thead>
            <tr>
                <th class="text-left">Name</th>
                <th class="text-left">Calories</th>
            </tr>
        </thead>
        <tbody class="move-table">
            <transition-group name="slide">
                <tr class="tt" v-for="item in list" :key="item.name">
                    <td>{{ item.name }}</td>
                    <td>{{ item.calories }}</td>
                </tr>
            </transition-group>
        </tbody>
    </v-table>
</template>

<script lang="ts" setup>
import { linkSync } from "fs";
import { toValue } from "vue";
import { reactive, onMounted, ref } from "vue";
const initAry = [
    {
        name: "Frozen Yogurt",
        calories: 159
    },
    {
        name: "Ice cream sandwich",
        calories: 237
    },
    {
        name: "Eclair",
        calories: 262
    },
    {
        name: "Cupcake",
        calories: 305
    },
    {
        name: "Gingerbread",
        calories: 356
    },
    {
        name: "Jelly bean",
        calories: 375
    },
    {
        name: "Lollipop",
        calories: 392
    }
];
const list = reactive(initAry);
let total = list.length;

function addItem() {
    total++;
    const item = {
        name: "test-" + total,
        calories: Math.floor(Math.random() * 100000)
    };
    const id = Math.floor(Math.random() * list.length);
    // const temp = [...list.value];
    // temp.splice(id, 0, item);
    // list.value = temp.slice(0, 7);
    list.unshift(item);
    // list.splice(id, 0, item);
    while (list.length > 6) {
        list.pop();
    }
}

onMounted(() => {
    setTimeout(updates, 600);
});

function updates() {
    addItem();
    const t = 10 + Math.floor(Math.random() * 2000);
    setTimeout(updates, t);
}
</script>

<style lang="less">
.slide-enter,
.slide-leave-to {
}

.slide-leave,
.slide-enter-to {
}

.move-table {
    position: relative;
}
.tt {
    position: relative;
}

.slide-enter-active {
    animation: slide-in 0.2s ease-out;
}

.slide-leave-active {
    animation: slide-out 0.2s ease-out;
    /* 这里在离开的时候，需要让这个元素脱离标准流，不然后面的元素动不了 */
    position: absolute;
}

/* 想要让动画平滑一点，需要加v-move的类名，v-可以别name的值 */
.slide-move {
    transition: all 0.5s;
}

@keyframes slide-in {
    from {
        transform: translateY(10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-out {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(-10px);
        opacity: 0;
    }
}
.v-table__wrapper {
    overflow: hidden !important;
}
</style>
